<template>
  <div class="extension-apply">
    <HederTop title="Loan Extension"></HederTop>
    <div class="choose-box">
<!--      <p class="title">{{ $t('chooseExDays') }}</p>-->
      <div class="days">
        <div class="tip">Rollover Days</div>
        <div class="day">{{ extensionDate }}</div>
      </div>
      <!-- <date-range -->
        <!-- :date-data="newRepayTime" -->
        <!-- :overdue-flag="overdueFlag"> -->
      <!-- </date-range> -->
      <div class="extenstion-date">
          <p>Repayment date after extension </p>
          <p> {{ newRepayTime | formatDate('MM-dd-yyyy') }}</p>
      </div>
      <!-- <div  class="tips"> -->
        <!--  -->
        <!--  -->
      <!-- </div> -->
    </div>

    <div class="fee">
      <span>{{ $t('extensionFee') }}</span>
      <span class="amount">PHP {{ amount | formatCurrency(',') }}</span>
    </div>

    <button @click="payHandler" class="btn-ui">{{ $t('pay') }}</button>

  </div>
</template>

<script>
  import DateRange from './components/dateRange.vue';
  import HederTop from '@/components/header-top'

  export default {
    name: 'extension-apply',
    components: {
      DateRange,
      HederTop
    },
    data () {
      return {
        amount: '',
        extensionDate: '', // 展期天数
        chooseData: [],
        extensionRate: '',
        extensionDayCfg: '',
        extensionFeeCfg: '',
        overdueFlag: '',
        extensionDay: null,
        dateData: {
          fromDate: '',
          toDate: '',
        },
        newRepayTime:'',
        extensionFee: '',
        isDisabledSubmit: false,
        pageTrackerInfo: {
          page: 'rollover',
          startTime: new Date().getTime()
        }
      };
    },
    methods: {
      /**
       * 获取展期数据
       */
      getData() {
        const params = {
          orderNo: this.orderId,
        };
        this.$api.delayList(params).then(res => {
          const { status, error, msg, data } = res;
          if ('1' === status && ('00000000' === error || '0000' === error) && data) {
            console.warn(data);
            this.extensionDate = data.defaultValue;// 展期天数
            this.newRepayTime = data.newRepayTime;// 展期到期时间
            this.amount = data.amount;
          }
        });
      },
      /**
       * 选择展期天数
       */
      chooseHandler(item) {
        this.extensionDay = item.extensionDay;
        this.dateData.fromDate = item.fromDate;
        this.dateData.toDate = item.toDate;
        this.extensionFee = item.extensionFee;
      },
      payHandler() {
        // 展期详情页展期还款点击
        this.$buryPoint.action({
          eventName: 'rollover_repayment_click',
          eventValue: {
            orderId: this.orderId || ''
          },
          ...this.pageTrackerInfo
        })
        // 展期跳转选择渠道选择页面
        this.$router.push({
          path: '/repay',
          query: {
            orderId: this.orderId,
            payinType: 'EXTENSION', // 类型展期
            amount: this.amount,
            productId:this.productId
          }
        });
      }
    },
    created () {
      const query = this.$route.query;
      this.orderId = query.orderId;
      this.productId = query.productId
      this.getData();
    },
    beforeDestroy () {
      this.pageEndAction()
    },
    mounted () {
      this.pageStartAction()
      // 展期详情页页面曝光
      this.$buryPoint.action({
        eventName: 'rollover_page_show',
        eventValue: {
          orderId: this.orderId || ''
        },
        ...this.pageTrackerInfo
      })
    }
  };
</script>

<style lang="scss">
  @import "~@/assets/scss/function";

  [data-page=extension-apply] {
    body {
      background: #f8f8f8;
      .extension-apply {
        padding: 230px 40px 150px;
        .choose-box {
          width:690px;
          background:#FFF;
          border-radius:20px;
          margin:0 auto;
          padding: 30px;
          // .title {
          //   font-size:36px;
          //   font-weight:bold;
          //   color:#222222;
          //   line-height:42px;
          // }
          .days {
            // display: flex;
            // align-items: center;
            // justify-content: space-around;
            margin-bottom: 68px;
            text-align: center;
            .day{
              font-size: 80px;
              font-weight: bold;
              line-height: 94px;
              color: #EC5958;
            }
            .tip{
              font-size: 28px;
              color: #555;
              line-height: 32px;
              margin-bottom: 16px;
            }
            // span {
            //   flex: 1;
            //   margin:0 15px;
            //   height:88px;
            //   background:#FFFFFF;
            //   border-radius:10px;
            //   border:1px solid $mainColor;
            //   text-align: center;
            //   font-size:32px;
            //   font-weight:bold;
            //   color:$mainColor;
            //   line-height:88px;
            // }
            // span:first-child {
            //   margin-left:0px;
            // }
            // span:last-child {
            //   margin-right:0px;
            // }
            // .active {
            //   background: #D2F0D0 url(~@/assets/imgs/extension/choosed.svg) no-repeat right top;
            //   background-size: 36px 36px;
            // }
          }
          // .tips {
          //   font-size:24px;
          //   color:#666666;
          //   line-height:32px;
          //   margin: 28px 0 0 0;
          //   p {
          //     margin:0 0 18px 0;
          //     background: url('~@/assets/imgs/extension/icon-tips.png') no-repeat left top;
          //     background-size: 32px 32px;
          //     padding:0 0 0 34px;
          //   }
          //   p:last-child {
          //     margin:0;
          //   }
          // }
        }
        .extenstion-date{
          text-align: center;
          background: rgba(250,216,78,0.2);
          border-radius: 16px;
          height: 168px;
          padding: 32px 0;
          text-align: center;
          color:#000;
          font-size: 32px;
          line-height: 40px;
          & > p:first-child {
            margin-bottom: 24px;
          }
        }
        .fee {
          height:120px;
          background:#FFF;
          border-radius:16px;
          margin-top: 42px;
          padding: 0 32px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 32px;
          color:#000;
        }
        .btn-ui {
          width: 100%;
          height: 100px;
          margin-top: 162px;
        }
      }
    }
  }
</style>
